import React, { useState } from 'react';
import { Alert, Dimensions, StyleSheet, Text, ScrollView, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
import { getStatusBarHeight } from 'react-native-status-bar-height';

//滚动组件练习
//动态计算scrollView高度，屏幕高度-状态栏高度-scrollView上面部分view的高度
const ScrollViewPage = () => {

    const [height, setHeight] = useState(0)

    const [stateBarheight, setStateBarheight] = useState(0)

    return (
        <View style={styles.root}>
            <Text onLayout={(event) => {
                const { height } = event.nativeEvent.layout
                setHeight(height)
                setStateBarheight(getStatusBarHeight())
            }}>
                头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部头部
            </Text>
            <View style={[styles.scroll]}>
                <ScrollView style={{
                    height: (Dimensions.get('window').height - height - stateBarheight)
                }}>
                    <Text style={styles.content}>
                        阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看
                        阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看阿斯顿发你看老师的就改了送打击犯罪手法的好看\n最后一行了
                    </Text>
                </ScrollView>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    root: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
        flexDirection: "column"
    },
    content: {
        lineHeight: 40,
        fontSize: 18
    },
    scroll: {
        backgroundColor: "#999999",
        paddingHorizontal: 10,
    }
})

export default ScrollViewPage;
